<!-- <template>
    <div>
      <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="/about">ABOUT</a></li>
        <li><a href="/news">NEWS</a></li>
      </ul>
    </div>
  </template> -->
  <!-- Nuxt.js 并不推荐这种<a>标签的作法，它为我们准备了<nuxt-link>标签（vue中叫组件） -->
    <template>
      <div>
        <ul>
          <li><nuxtLink :to="{name:'index'}">HOME</nuxtLink></li>
          <!-- 使用 a 标签跳转是没有动画效果 -->
          <li><a href="/about">ABOUT</a></li>
          <!-- <li><nuxtLink :to="{name:'about'}">ABOUT</nuxtLink></li> -->
          <!-- <li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li> -->
          <!-- 传递参数用params:一般情况下我们不推荐这种传递参数方法，因为我们一刷新，参数立马就丢失了！ -->
          <li><nuxt-link :to="{name:'news',params:{id:3306}}">NEWS</nuxt-link></li>
        </ul>
      </div>
    </template>
    
    